import { useEffect, useRef, useState } from 'react'
import { faqData } from '@/lib/imageUpscale/common'
import styles from './scss/ImageUpscaleFAQ.module.scss'
import { stylesList } from '@/utils/common'
interface Props {
  show: boolean
  onHide: () => any
}

function ImageUpscaleFAQ(props: Props) {
  const [activeTypeIndex, setActiveTypeIndex] = useState(0)
  const rootClassName = ['image-upscale-faq-component']
  const hideTimer = useRef(null)
  const [showContent, setShowContent] = useState(false)
  if (!props.show) {
    rootClassName.push('image-upscale-faq-component-hide')
  }

  useEffect(() => {
    if (!props.show && showContent) {
      hideTimer.current = setTimeout(() => {
        setShowContent(false)
        hideTimer.current = null
      }, 1000)
    } else if (props.show) {
      hideTimer.current && clearTimeout(hideTimer.current)
      setShowContent(true)
    }
  }, [props.show])
  return (
    <div className={stylesList(styles, rootClassName.join(' '))}>
      {showContent && (
        <>
          <div className={styles['title']}>
            {/* <div className="exit">返回</div> */}
            <svg
              onClick={props.onHide}
              className={styles['exit']}
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2337"
              width="200"
              height="200">
              <path
                d="M894.976 574.464q0 78.848-29.696 148.48t-81.408 123.392-121.856 88.064-151.04 41.472q-5.12 1.024-9.216 1.536t-9.216 0.512l-177.152 0q-17.408 0-34.304-6.144t-30.208-16.896-22.016-25.088-8.704-29.696 8.192-29.696 21.504-24.576 29.696-16.384 33.792-6.144l158.72 1.024q54.272 0 102.4-19.968t83.968-53.76 56.32-79.36 20.48-97.792q0-49.152-18.432-92.16t-50.688-76.8-75.264-54.784-93.184-26.112q-2.048 0-2.56 0.512t-2.56 0.512l-162.816 0 0 80.896q0 17.408-13.824 25.6t-44.544-10.24q-8.192-5.12-26.112-17.92t-41.984-30.208-50.688-36.864l-51.2-38.912q-15.36-12.288-26.624-22.016t-11.264-24.064q0-12.288 12.8-25.6t29.184-26.624q18.432-15.36 44.032-35.84t50.688-39.936 45.056-35.328 28.16-22.016q24.576-17.408 39.936-7.168t16.384 30.72l0 81.92 162.816 0q5.12 0 10.752 1.024t10.752 2.048q79.872 8.192 149.504 41.984t121.344 87.552 80.896 123.392 29.184 147.456z"
                p-id="2338"
                fill="#a4b2c1"></path>
            </svg>
            <span>常见问题</span>
          </div>
          <div className={styles['list-types']}>
            {faqData.map((item, index) => {
              return (
                <div
                  className={
                    index == activeTypeIndex
                      ? styles['type-item-active']
                      : styles['type-item']
                  }
                  key={item.type}
                  onClick={() => setActiveTypeIndex(index)}>
                  <div className={styles['type-title']}>{item.type}</div>
                </div>
              )
            })}
          </div>
          <div className={styles['list-contents']}>
            {faqData[activeTypeIndex].list.map((item, index) => {
              return (
                <div className={styles['item']} key={index}>
                  <div className={styles['item-title']}>{item.problem}</div>
                  <div className={styles['item-content']}>
                    {item.answers.map((answer, index) => {
                      return (
                        <p className={styles['answer']} key={index}>
                          {`[${index + 1}] ${answer}`}
                        </p>
                      )
                    })}
                  </div>
                </div>
              )
            })}
            <div style={{ height: '100px' }}></div>
          </div>
        </>
      )}
    </div>
  )
}

export default ImageUpscaleFAQ
